<template>
  <div class="router-info">
    <div class="page-list">
      <div class="page"
           v-for="(item, index) in current"
           :key="index"
           @click="change(item)">
        {{ $t(item.name) + (index == current.length - 1 ? "" : " >") }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "router-info",
  components: {},
  props: {
    current: {
      value: "",
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      r: [
        {
          name: "Home",
          route: "",
        },
        {
          name: "Successful Case",
          route: "",
        },
        {
          name: "Bus Station Billboard",
          route: "",
        },
      ],
    };
  },
  methods: {
    change (e) {
      this.$emit("change", e);
    },
  },
};
</script>
<style lang="scss" scoped>
.router-info {
  .page-list {
    width: 100%;
    display: flex;
    padding: 10px 20px;
    background: #fafafa;
    justify-content: flex-end;
    .page {
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>